As new technologies have emerged over the past few years, the typical web interface has changed. This is likely no surprise to any web developers, but many have realized that the increased flexibility of the technology available on the web has often been as much of a headache as a help. My team has recently been tasked with rebuilding our company’s main product to make it function less like a web site and more like a web application.
This of course seemed like a good idea. There are thousands of blog posts out there talking about it and thousands of bloggers can’t be wrong. Unfortunately, there really isn’t a clear definition of a web application. There is so much variation around that it’s difficult to pin down what makes a web site feel more like and application.
It seems that most developers have focused on using AJAX to improve data-handling and reduce page refreshes. While this is definitely a nice improvement for most sites, it doesn’t really help make a site feel more like an application. Applications still have load times; folders still partially refresh when you change views and desktop users are likely used to it. Desktop applications aren’t just faster with data, they’re generally more tactile than web applications, but the tactile nature of the desktop hasn’t transitioned well to the web.
We started to build a list of the tactile interface mechanisms that users were familiar with on the desktop and looked for ways to bring them into out application. After some long discussions and lots of research, we came up with a list of interface features common in desktop applications that we wanted to translate to our web app.
1. Dragging and Dropping
One of the most common mouse techniques is dragging and dropping. There have been lots of workarounds done on the web, but this is really a core interface mechanism for the desktop that is underutilized on the web. Rather than selecting categories from dropdown lists, we started to make elements dragable. This makes the interface feel more comfortable and makes the process of organizing data much easier. This is a feature that could be easily added for any data adhering to categories, folders or other organization/taxonomy system. The idea could also translate well to selecting multiple tags from a tag cloud or adding multiple criteria to a search.
Some web applications are already implement this well. Check out Yahoo Pipes and Flickr for some really great uses of drag and drop. Implementation is generally not too bad either. Many of the javascript libraries available have cross-browser drag and drop support.
2. Group Selection
After we had a few dragable elements, we realized that the next logical step was creating selection options. Being able to drag items into folders or categories isn’t that useful unless you can drag multiple items at once. On the desktop, there several options for selecting multiple items. You can shift click, control click or select items by dragging a box around them.
Shift clicking and control clicking can be handled by javascript, but it can take a bit of effort to get it to work well across different browsers. Like much of the information about mouse events, the state of the shift and control keys is available, but in different locations in each browser. We found this article very useful http://www.javascripter.net/faq/ctrl_alt.htm.
3. Customizable Interfaces
One of the final things that we decided to add to the application was a more flexible interface. Most desktop applications have some level of interface customization. Photoshop CS3 is a perfect example of this flexibility. Most of the menus have a collapsed mode that only displays icons, rather than the full menu or panel. This can be a great way to maximize screen real estate without limiting functionality. The menus and panels can also be moved and rearranged. These two customization options provide a good technique for providing a better user experience for a wider audience. Beginner users can leave menus open and use a minimal number of panels or features. Advanced users can collapse items and have more options available on the screen at once.
These are three techniques that you might be able to use to give your web applications a bit more tactile feel. For the most part, these are all fairly easy to implement with many of the JavaScript libraries. We use Scriptaculous and it supports Drag and Drop, Sortable elements and basic AJAX tools with a minimal amount of extra code.
Ian Muir
